<template>
  <div class="c-minh c-pb20">
    <!-- search -->
    <new-search-bar
      class="c-bd-b1"
      searchFixed="true"
      bgSearch="c-bg-white c-pv24-i"
      @search='startSearch'
      @cancel='startSearch'
    ></new-search-bar>
    <!-- content -->
    <div class="c-ph24 c-flex-row c-justify-sb c-pt20 c-pb8 c-bg-white c-p">
      <div class="c-fs22 c-fc-xblack">共含{{total}}个内容</div>
      <div
        class="c-fs26 c-fc-sblack c-lh c-ww60 c-textAlign-r"
        v-show="styleType == 1"
        @click="changeStyleType(2)"
      ><span class="iconfont">&#xe98a;</span></div>
      <div
        class="c-fs26 c-fc-sblack c-lh c-ww60 c-textAlign-r"
        v-show="styleType == 2"
        @click="changeStyleType(1)"
      ><span class="iconfont">&#xe989;</span></div>
    </div>
    <!-- 一行一列 -->
    <section
      class="c-bg-white c-ph24 c-pb20"
      v-show="styleType == 1"
    >
      <div
        class="c-flex-row c-pv24"
        v-for="(item, index) in ebooksList"
        :key="index"
        @click="clickGoEbooksDetail(item.ebId)"
      >
        <div class="c-ww96 c-hh144 c-text-hidden c-br16 c-bd-b1">
          <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" />
        </div>
        <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-pv8 c-pl20">
          <div class="c-fs24 c-text-ellipsis1 c-wordBreakAll">
            <span class="theme-bd1 c-fs18 theme-fc c-br15 c-ph8 c-mr12 c-lh" v-if="Number(item.price) > 0 && item.svipDiscount == 0 && item.vipDiscount != 0">SVIP免费</span>
            <span class="theme-bd1 c-fs18 theme-fc c-br15 c-ph8 c-mr12 c-lh" v-if="Number(item.price) > 0 && item.vipDiscount == 0">VIP免费</span>
            {{item.name}}
          </div>
          <div class="c-fs20 c-fc-sblack c-mt16 c-text-ellipsis1">{{item.author}}</div>
          <div class="c-flex-row c-justify-sb c-mt20 c-aligni-center">
            <div class="c-flex-row c-aligni-center c-flexw-wrap">
              <div class="c-fc-xmlred c-fw600" :class="item.payType == 2 && item.price > 0 ? 'c-fs26' : 'c-fs22'"><span class="c-fs20" v-if="item.price > 0 && item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142, item.optimal, 'index')}}</div>
              <div v-if="isShowcrossedPrice(item)" class="c-fs18 c-fc-gray c-text-decoration-through c-ml10">￥{{getCrossedPrice(item)}}</div>
            </div>
            <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-fs18 c-fc-sblack c-lh c-flex-shrink0">{{item.viewNum | formatNumber}}次阅读</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 一行三列 -->
    <section
      class="c-bg-white c-ph24 c-pb20 c-pt10 c-flex-row c-flexw-wrap c-aligni-start"
      v-show="styleType == 2"
    >
      <div
        class="c-flex-column c-ww160 c-pv24"
        :class="index % 3 == 0 ? '' : 'c-ml56'"
        v-for="(item, index) in ebooksList"
        :key="index"
        @click="clickGoEbooksDetail(item.ebId)"
      >
        <div class="c-p c-ww160 c-hh240 c-br16 c-text-hidden">
          <vip-status :item="item"></vip-status>
          <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" />
          <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(ckFrom))" class="c-pa c-p-b0 c-p-l0 c-ww160 c-hh36 c-lh36 c-fs20 c-fc-white readings">{{item.viewNum | formatNumber}}次阅读</div>
        </div>
        <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-mt18">{{item.name}}</div>
        <div class="c-fs20 c-fc-sblack c-mt12 c-text-ellipsis1">{{item.author}}</div>
        <div class="c-mt12 c-flex-row c-aligni-end c-flexw-wrap">
          <div class="c-fc-xmlred c-fw600" :class="item.payType == 2 && item.price > 0 ? 'c-fs26' : 'c-fs22'"><span class="c-fs20" v-if="item.price > 0 && item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 142, item.optimal, 'index')}}</div>
          <div v-if="isShowcrossedPrice(item)" class="c-fs18 c-fc-gray c-text-decoration-through">￥{{getCrossedPrice(item)}}</div>
        </div>
      </div>
    </section>
    <!-- loading -->
    <loading-status-tem
      :dataStatus="dataStatus"
      noDataText="暂无结果"
    ></loading-status-tem>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js";
const LIMIT = 10;
let pageIndex = 0;
let page = 1;
let searchText; //搜索输入框
export default {
  name: "EbooksList",
  components: {
    newSearchBar,
    loadingStatusTem,
    vipStatus,
    CoverImg
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      dataStatus: 'HAS_MORE_DATA',
      ebooksList: [],
      styleType: 2, //1: 单列 2：三列
      total: 0,
      ckFrom: global.ckFrom.ebooks,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    }
  },
  computed: {
    // 判断显示划线价格
    isShowcrossedPrice() {
      return function(item) {
        return !this.$isWxAppIos() && item.crossedPrice && Number(item.crossedPrice) > 0;
      }
    },
    // 获取划线价格
    getCrossedPrice() {
      return function(item) {
        return item.crossedPrice;
      }
    }
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("电子书");
    this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  methods: {
    initData() {
      pageIndex = 0;
      page = 1;
      searchText = '';
      this.dataStatus = 'HAS_MORE_DATA';
      this.ebooksList = [];
      this.getEbookList();
    },
    clickGoEbooksDetail(id) {
      let toPath = `/homePage/ebooks/ebooksDetail?id=${id}`;
      this.iosAppRouteChange(toPath);
    },
    // 获取电子书列表
    getEbookList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}ebooks/getEbookList?searchName=${searchText}&index=${pageIndex}&page=${page}&limit=${LIMIT}`,
        res => {
          this.total = res.total;
          if (pageIndex == 1) {
            this.ebooksList = res.data;
          } else {
            this.ebooksList = [...this.ebooksList, ...res.data];
          }
          if (res.total * 1 == this.ebooksList.length) {
            this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex += LIMIT;
            page++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    changeStyleType(type) {
      this.styleType = type;
    },
    //   搜索事件
    startSearch(e) {
      page = 1;
      this.ebooksList = [];
      searchText = e.searchValue;
      this.getEbookList();
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.ebooksList.length > 0) {
          this.getEbookList();
        }
      });
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    //分享
    wechatShare: function () {
      let title = '电子书列表';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = '电子书列表';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    }
  }
}
</script>

<style scoped>
.c-maxh240 {
  max-height: 6rem;
}
.c-ml56 {
  margin-left: 1.4rem;
}
.c-ww96 {
  width: 2.4rem;
}
.c-maxh144 {
  max-height: 3.6rem;
}
.readings {
  text-align: center;
  opacity: 0.9;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.c-ww86 {
  width: 2.15rem;
}
</style>